<template>
  <div class="order-expense-card">
    <!-- 费用顶部按钮 -->
    <div class="flex justify-between">
      <a-button type="primary" @click="checkAllFn">
        <span class="chooseIcon"><div v-show="isCheckAll"></div></span> 选择/取消本页全部订单</a-button
      >
      <tableButton :buttons="buttons" />
    </div>
    <!-- 费用模块 -->
    <a-spin :loading="tableOptions[0].tableLoading" tip="加载中..." class="max-w-full">
      <table-expense-item
        :ref="(el) => setItemRef(el, index)"
        @getCheckList="getCheckList"
        v-for="(item, index) in tableOptions"
        :key="index"
        :table="item"
      />
    </a-spin>
    <!-- 分页组件 -->
    <table-footer v-if="paginationOpt" :pagination="paginationOpt" :showRefresh="false" position="end" @change="pagenationChangeFn" />
  </div>
</template>

<script setup>
  import { computed, onMounted, reactive, ref } from 'vue'
  import tableExpenseItem from './table-expense-item.vue'
  import tableButton from './table-button.vue'

  const isCheckAll = ref(false)
  // 定义emits
  const emits = defineEmits(['checkLisk', 'loadData', 'pagenationChange'])
  // 定义 props
  const props = defineProps({
    expenseOpts: {
      type: Object,
      default: () => {},
    },
  })
  // 控制分页函数
  const paginationOpt = ref(null)
  const pagenationChangeFn = () => {
    isCheckAll.value = false
    emits('loadData')
    emits('pagenationChange')
  }
  // 全选
  const checkList = reactive(new Map())
  const getCheckList = ({ key, value }) => {
    checkList.set(key, value)
    sessionStorage.setItem('expenseselectedRowKeys', JSON.stringify(Array.from(checkList.values()).flat()))
  }
  const checkAllFn = () => {
    isCheckAll.value = !isCheckAll.value
    itemRefs.value.forEach((it) => {
      it.updateCheckStatus(isCheckAll.value)
    })
  }
  // 初始化数据
  const expenseOpts = reactive(props.expenseOpts)
  const buttons = ref([])
  paginationOpt.value = expenseOpts.pagination
  buttons.value = expenseOpts.topButtons
  const tableOptions = computed(() => {
    let orderList = []
    let { dataList } = props.expenseOpts
    if (dataList.length === 0) {
      return [{ ...props.expenseOpts, dataList: [], pagination: null }]
    }
    dataList.forEach((it) => {
      orderList.push({
        ...props.expenseOpts,
        dataList: it.orderFeeDetailList || [],
        orderInfo: it,
        pagination: null,
      })
    })
    // 更新选择状态
    updateCheckedFn(orderList)
    return orderList
  })
  const updateCheckedFn = (orderList) => {
    if (orderList.length === orderList.length) {
      itemRefs.value.forEach((it, index) => {
        let curId = orderList[index]?.orderInfo?.id
        let curCheckIds = checkList.get(curId) || []
        it.updateCheckedFn(Array.from(curCheckIds))
      })
    }
  }
  // 处理组件内部数据
  const getCheckListData = () => {
    let expenseselectedRowKeys = sessionStorage.getItem('expenseselectedRowKeys')
    return expenseselectedRowKeys ? JSON.parse(expenseselectedRowKeys) : []
  }
  const itemRefs = ref([])
  const setItemRef = (el, key) => {
    if (el) {
      itemRefs.value[key] = el
    } else {
      delete itemRefs.value[key]
    }
  }
  const updateCheckStatusFn = (value) => {
    isCheckAll.value = value
    itemRefs.value.forEach((it) => {
      it.updateCheckStatus(value)
    })
  }
  onMounted(() => {
    // 状态初始化
    sessionStorage.setItem('expenseselectedRowKeys', '[]')
    isCheckAll.value = false
  })

  defineExpose({
    getCheckListData,
    updateCheckStatusFn,
  })
</script>

<style scoped lang="less">
  .chooseIcon {
    width: 12px;
    height: 12px;
    border: 2px solid #fff;
    padding: 1px;
    margin-right: 5px;
    div {
      background: #fff;
      width: 100%;
      height: 100%;
    }
  }
</style>
